<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 模块化 (ES Module / CommonJS)
    // 目的: 将一个大的项目插成相互依赖的小文件, 使用时按需引入即可  => (一般分离都是JS代码 => 业务逻辑)

    // 优点:
    // 1. 减少全局变量污染 ->  模块中的变量和方法都是局部的
    // 2. 按需暴露和按需引入
    //    ES Module  =>   export  import
    //    CommonJS   =>   module.exports = {}     require()
    // 3. 模块之间也是可以相互引入的
    // 4. 代码分离和代码复用


    // Vue组件化
    // 目的:将一个大的项目插成相互依赖的小文件(组件) -> 分离的代码不仅限于JS(代码逻辑),还有UI(html + css) => 一个组件就是一个完整的功能

    // 优点:
    // 1. 组件之间也是可以相互引入的
    // 2. 代码分离和功能复用

    // 注意:
    // 1. 每一个组件都是一个可复用的Vue实例 => 都有自己的 data methods computed watch 以及生命周期和钩子函数
    // 2. 当前课程中代码分离还是很完全 =>  后续会给予脚手架,创建单文件组件(每个组件都有自己的 html css 和 js)





</script>

</html>